<template>
  <article class="page">
    <headerbar :hideBack="backHead">
      <div @click="back()" class="back" v-if="!showTitle">
        <span class="arrow"></span>
      </div>
      <div class="message"></div>
      <div class="head-bd">
        {{ title }}
      </div>
      <div class="message"></div>
      <div @click="goNext('redfriendsRelease')" class="message" slot="btn">
        <img
          src="../../../../static/images/dangjian/friendscircle/icon-take-photo.png"
        />
      </div>
    </headerbar>

    <section class="mine-page">
      <div class="d-scroll-head-menu list-text" style="" v-if="tabIndex === 0">
        <cube-scroll
          ref="scroll"
          :scrollEvents="['scroll-end']"
          :options="options"
          @scroll-end="scrollEnd"
          @pulling-up="onPullingUp"
          @pulling-down="onPullingDown"
          v-remainScrollCube="'redfriendscircle'+tabIndex"
        >
          <section class="user-header" v-if="showTitle">
            <section class="people-info" @click="goMyCircle(userInfo)">
              <span class="name">{{ userInfo.nickname }}</span>
              <!--<div v-if="!userInfo.photo || userInfo.photo === ''" class="avatar-img"><img src="../../../../static/images/dangjian/home/water-logo.png" alt=""></div>-->
              <!--<div v-if="!sysFile.url || sysFile.url === '' ||" class="avatar-img"><img src="../../../../static/images/dangjian/home/water-logo.png" alt=""></div>-->
              <div class="avatar-img fillet">
                <img :src="tools.getAvatarUrl(userInfo.id)" alt="" />
              </div>
            </section>
          </section>

          <section class="" v-if="showTitle">
            <ul class="tab" v-if="showMenu">
              <li @click="loadData(0)" :class="{ active: tabIndex == 0 }">
                <span>所有动态</span>
              </li>
              <li @click="loadData(1)" :class="{ active: tabIndex == 1 }">
                <span>红友动态</span>
              </li>
              <li @click="goApplication()" :class="{ active: tabIndex == 2 }">
                <span>红友管理</span>
              </li>
            </ul>
          </section>
          <fetchData
            class="project-tip"
            :loading="isLoading"
            :data="swipeData"
          ></fetchData>
          <noData :loading="isLoading" :data="data"
                  v-if="!isLoading &&
              tabIndex === 0 &&
              swipeData.length === 0
            "></noData>
<!--          <div
            class="text-center no-data"
            :loading="isLoading"
            :data="data"
            v-if="
              !isLoading &&
              (tabIndex === 0 || tabIndex === 1) &&
              swipeData.length === 0 &&
              showNoData
            "
          >
            <img src="../../../../static/images/no_data.png" />
            <p>暂无数据</p>
          </div>-->
          <div
            class="circle-item"
            v-for="(data, index) in swipeData"
            :key="data.id"
          >
            <div @click="go('redfriendsAdd', data)" class="avatar-img">
              <!--<img v-if="!data.photo || data.photo === ''" src="../../../../static/images/default.jpg" >-->
              <img :src="tools.getAvatarUrl(data.createBy, true)" />
            </div>
            <div class="cont">
              <h2 class="name">
                {{ data.userName }}
                <redfriendscircleDeleteComponent
                  :currentUserInfo="userInfo"
                  :data="data"
                  :index="index"
                ></redfriendscircleDeleteComponent>
              </h2>
              <!--<p class="tip">{{data.groupName}}</p>-->
              <div class="text-wrap m-content overflow-line" id="J_description"
                v-if="!data.isShare || data.isShare === '0'"
              >
                {{ data.content }}
              </div>
              <div class="btn-more" v-if="getIsShow(data.content,data.isShare)" @click="showmoreDesc($event)">全文</div>
              <div
                class="text-wrap"
                v-if="data.isShare && data.isShare === '1'"
              >
                {{ data.friendShare.shareContent }}
                <shareContentInFriend
                  :key="index"
                  :newsId="data.friendShare.shareContentId"
                  :source="data.friendShare.source"
                  :friendShare="data.friendShare"
                  :shareContentTitle="data.friendShare.shareContentTitle"
                  :sharePhoto="data.friendShare.sharePhoto"
                  :sharePhotoOss="data.friendShare.sharePhotoOss"
                ></shareContentInFriend>
              </div>
              <div v-if="data.filesOssUrl && tools.indexOfHttp(data.filesOssUrl)"  class="imgs" v-saveImage>
                <div class="img" v-for="(fileOssUrl, i) in getFiles(data.filesOssUrl)">
                  <img
                    :src="fileOssUrl"
                    @click="showImagePreview(fileOssUrl)"
                  />
                </div>
              </div>
              <div v-else  class="imgs" v-saveImage>
                <div class="img" v-for="(fileId, i) in getFiles(data.files)">
                  <img
                    :src="showImg(fileId, true)"
                    @click="showImagePreview(fileId)"
                  />
                </div>
              </div>
              <div class="tip date-wrap">
                <span class="date">{{ getTime(data.fbsj) }}</span>

                <div class="flex">
                  <div class="icon-live-msg">
                    <img
                      v-if="data.isComment === '0'"
                      src="../../../../static/images/dangjian/friendscircle/icon-like.png"
                      @click="submitComment(data, '', '0')"
                    />
                    <img
                      v-if="data.isComment === '1'"
                      src="../../../../static/images/dangjian/home/news/icon-like-active.png"
                    />
                  </div>
                  <span class="pdh-1 center-my">{{ data.commentNum }}</span>
                  <div class="icon-live-msg">
                    <img
                      src="../../../../static/images/dangjian/friendscircle/icon-live-msg.png"
                      @click="showAlert(data)"
                    />
                  </div>
                  <span class="center-my">{{ data.contextNum }}</span>
                  <span v-if="data.commentList && data.commentList.length >0 " @click="delEvaluate(swipeData,data,index)"
                  ><i class="msg-all"></i>收起</span>
                  <span v-else-if="data.contextNum && data.contextNum>0" @click="goEvaluate(swipeData,data,index)"
                  ><i class="msg-all"></i>展开</span>
                  <span v-else="data.contextNum>0" @click="goEvaluate(swipeData,data,index)"
                  ><div style="width:2em;"></div></span>
                </div>
                <input type="hidden" :value="flag"/>
              </div>
              <div class="comment" v-if="data.commentList && data.commentList.length >0">
                <div @touchstart.prevent="gtouchstart(data,item,index,indexChild)" @touchend.prevent="gtouchend(data,item,index)" class="like-wrap" :class="[onPress == (item.id+indexChild) ? 'onPress':'']" v-for="(item,indexChild) in data.commentList" :key="item.id">
                  <div class="left">{{ item.userName }}</div><div v-if="item.replyToUserId" class="center-new">回复<strong>{{item.replyToUser}}</strong></div>：<div class="right">{{item.content}}</div>
                </div>
                <!--              <div class="like-wrap">
                                <div class="left">评论人</div>：<div class="right">新的评论</div>
                                                <div class="icon-like">
                                                  <img
                                                    v-if="data.isComment === '0'"
                                                    src="../../../../static/images/dangjian/friendscircle/icon-like.png"
                                                    @click="submitComment(data, '', '0')"
                                                  />
                                                  <img
                                                    v-if="data.isComment === '1'"
                                                    src="../../../../static/images/dangjian/home/news/icon-like-active.png"
                                                  />
                                                </div>
                                                <span class="pdh-1">{{ data.commentNum }}</span>
                              </div>-->
              </div>
            </div>
          </div>
        </cube-scroll>

        <div class="pdv-10"></div>
        <div class="pdv-10"></div>
        <div class="pdv-10"></div>
      </div>
      <div class="d-scroll-head-menu list-text" style="" v-if="tabIndex === 1">
        <cube-scroll
          ref="scroll"
          :scrollEvents="['scroll-end']"
          :options="options"
          @scroll-end="scrollEnd"
          @pulling-up="onPullingUp"
          @pulling-down="onPullingDown"
          v-remainScrollCube="'redfriendscircle'+tabIndex"
        >
          <section class="user-header" v-if="showTitle">
            <section class="people-info" @click="goMyCircle(userInfo)">
              <span class="name">{{ userInfo.nickname }}</span>
              <!--<div v-if="!userInfo.photo || userInfo.photo === ''" class="avatar-img"><img src="../../../../static/images/dangjian/home/water-logo.png" alt=""></div>-->
              <!--<div v-if="!sysFile.url || sysFile.url === '' ||" class="avatar-img"><img src="../../../../static/images/dangjian/home/water-logo.png" alt=""></div>-->
              <div class="avatar-img fillet">
                <img :src="tools.getAvatarUrl(userInfo.id)" alt="" />
              </div>
            </section>
          </section>

          <section class="" v-if="showTitle">
            <ul class="tab" v-if="showMenu">
              <li @click="loadData(0)" :class="{ active: tabIndex == 0 }">
                <span>所有动态</span>
              </li>
              <li @click="loadData(1)" :class="{ active: tabIndex == 1 }">
                <span>红友动态</span>
              </li>
              <li @click="goApplication()" :class="{ active: tabIndex == 2 }">
                <span>红友管理</span>
              </li>
            </ul>
          </section>
          <fetchData
            class="project-tip"
            :loading="isLoading"
            :data="mySwipeData"
          ></fetchData>
          <noData :loading="isLoading" :data="mySwipeData"
                  v-if="!isLoading &&
              mySwipeData.length === 0"></noData>
          <div
            class="circle-item"
            v-for="(data, index) in mySwipeData"
            :key="data.id"
          >
            <div @click="go('redfriendsAdd', data)" class="avatar-img">
              <!--<img v-if="!data.photo || data.photo === ''" src="../../../../static/images/default.jpg" >-->
              <img :src="tools.getAvatarUrl(data.createBy, true)" />
            </div>
            <div class="cont">
              <h2 class="name">
                {{ data.userName }}
                <redfriendscircleDeleteComponent
                  :currentUserInfo="userInfo"
                  :data="data"
                  :index="index"
                ></redfriendscircleDeleteComponent>
              </h2>
              <!--<p class="tip">{{data.groupName}}</p>-->
              <div
                class="text-wrap m-content overflow-line"
                v-if="!data.isShare || data.isShare === '0'"
              >
                {{ data.content }}
               </div>
              <div class="btn-more" v-if="getIsShow(data.content,data.isShare)" @click="showmoreDesc($event)">全文</div>
              <div
                class="text-wrap"
                v-if="data.isShare && data.isShare === '1'"
              >
                {{ data.friendShare.shareContent }}
                <shareContentInFriend
                  :key="index"
                  :newsId="data.friendShare.shareContentId"
                  :source="data.friendShare.source"
                  :friendShare="data.friendShare"
                  :shareContentTitle="data.friendShare.shareContentTitle"
                  :sharePhoto="data.friendShare.sharePhoto"
                  :sharePhotoOss="data.friendShare.sharePhotoOss"
                ></shareContentInFriend>
              </div>
              <div v-if="data.filesOssUrl && tools.indexOfHttp(data.filesOssUrl)"  class="imgs" v-saveImage>
                <div class="img" v-for="(fileOssUrl, i) in getFiles(data.filesOssUrl)">
                  <img
                    :src="fileOssUrl"
                    @click="showImagePreview(fileOssUrl)"
                  />
                </div>
              </div>
              <div v-else  class="imgs" v-saveImage>
                <div class="img" v-for="(fileId, i) in getFiles(data.files)">
                  <img
                    :src="showImg(fileId, true)"
                    @click="showImagePreview(fileId)"
                  />
                </div>
              </div>

              <div class="tip date-wrap">
                <span class="date">{{ getTime(data.fbsj) }}</span>

                <div class="flex">
                  <div class="icon-live-msg">
                    <img
                      v-if="data.isComment === '0'"
                      src="../../../../static/images/dangjian/friendscircle/icon-like.png"
                      @click="submitComment(data, '', '0')"
                    />
                    <img
                      v-if="data.isComment === '1'"
                      src="../../../../static/images/dangjian/home/news/icon-like-active.png"
                    />
                  </div>
                  <span class="center-my">{{ data.commentNum }}</span>
                  <div class="icon-live-msg">
                    <img
                      src="../../../../static/images/dangjian/friendscircle/icon-live-msg.png"
                      @click="showAlert(data)"
                    />
                  </div>
                  <span class="center-my">{{ data.contextNum }}</span>
                  <span v-if="data.commentList && data.commentList.length >0 " @click="delEvaluate(mySwipeData,data,index)"
                    ><i class="msg-all"></i>收起</span>
                  <span v-else-if="data.contextNum && data.contextNum>0" @click="goEvaluate(mySwipeData,data,index)"
                    ><i class="msg-all"></i>展开</span>
                  <span v-else="data.contextNum>0" @click="goEvaluate(mySwipeData,data,index)"
                  ><div style="width:2em;"></div></span>
                </div>
                <input type="hidden" :value="flag"/>
              </div>
              <div class="comment" v-if="data.commentList && data.commentList.length >0">
                <div v-for="(item,indexChild) in data.commentList" :key="item.id">
                  <div @touchstart.prevent="gtouchstart(data,item,index,indexChild)" @touchend.prevent="gtouchend(data,item,index)" class="like-wrap" :class="[onPress == (item.id+indexChild) ? 'onPress':'']">
                    <div class="left" >{{ item.userName }}</div><div v-if="item.replyToUserId" class="center-new">回复<strong>{{item.replyToUser}}</strong></div>：<div class="right">{{item.content}}</div>
                  </div>
                </div>
<!--              <div class="like-wrap">
                <div class="left">评论人</div>：<div class="right">新的评论</div>
                                <div class="icon-like">
                                  <img
                                    v-if="data.isComment === '0'"
                                    src="../../../../static/images/dangjian/friendscircle/icon-like.png"
                                    @click="submitComment(data, '', '0')"
                                  />
                                  <img
                                    v-if="data.isComment === '1'"
                                    src="../../../../static/images/dangjian/home/news/icon-like-active.png"
                                  />
                                </div>
                                <span class="pdh-1">{{ data.commentNum }}</span>
              </div>-->
              </div>
            </div>
          </div>
        </cube-scroll>
        <!-- <div class="pdv-10"></div> -->
        <!-- <div class="pdv-10"></div> -->
        <div class="pdv-10"></div>
      </div>
      <!--红友列表-->
      <section class="d-scroll mgt-2" v-if="tabIndex === 2">
        <section class="people-list">
          <div
            v-for="item in frinds"
            class="people-item block noborder"
            @click="goDetail(item.userId)"
            :key="item.id"
          >
            <section class="people-info">
              <div class="avatar-img">
                <img
                  v-if="!item.photo || item.photo === ''"
                  src="../../../../static/images/default.jpg"
                />
                <img
                  v-if="item.photo && item.photo !== ''"
                  :src="showImg(item.photo, true)"
                />
              </div>
              <div class="name">
                {{ item.userName }}
              </div>
            </section>
            <div class="btns">
              <div class="btn" @click="showDeleteAlert(item)">删除</div>
            </div>
          </div>

          <p class="pdv-5"></p>
          <p class="pdv-5"></p>
          <div
            class="text-center no-data"
            v-if="frinds.length === 0 && showNoData"
          >
            <img src="../../../../static/images/no_data.png" />
            <p>暂无数据</p>
          </div>
        </section>
      </section>
    </section>
    <footerbar></footerbar>
  </article>
</template>

<script>
import footerbar from "@/components/layout/footerbar.vue";
import shareContentInFriend from "@/components/common/shareContentInFriend.vue";
import tools from "@/utils/tools";
import api from "@/common/config/api";
import loginService from "@/service/loginService";
import moment from "moment";
import ups from "@/components/common/upsComponent";
import redfriendscircleDeleteComponent from "./redfriendscircleDeleteComponent";

var timeOutEvent = 0; //定时器
export default {
  components: {
    footerbar,
    shareContentInFriend,
    ups,
    redfriendscircleDeleteComponent,
  },
  name: "redfriendscircle",
  data() {
    return {
      //控制超长隐藏显示
      isShowMore: false,
      isDescStatus: true,
      introduce: '',
      //控制超长隐藏显示
      backHead: true,
      typeId: 0,
      userInfo: {},
      swipeData: [],
      mySwipeData: [],
      options: {
        pullUpLoad: true,
        pullDownRefresh: {
          txt: " ",
        },
        scrollbar: false,
      },
      pageIndex: 1,
      tabIndex: 0,
      currentIndex: 0,
      tipMessage: "",
      from: "",
      title: "",
      showTitle: true,
      showMenu: true,
      needRefresh: false,
      frinds: [],
      isLoading: true,
      showNoData: false,
      flag:1,//用于更新组件
      placeholder:'评论',//评论的默认文字
      replyToUser:'',//被评论人姓名
      replyToUserId:'',//被评论人id
      supCommentId:'',//评论id
      // timeOutEvent:0,//长按事件的时间
      onPress:false,
    };
  },
  created() {
    this.$route.meta.keepAlive = true;
    this.init();
  },
  mounted() {
    console.log("mounted", this.scrollToY);
    if (this.scrollToY) {
      setTimeout(() => {
        this.scrollTo();
      }, 10);
    }
  },
  methods: {
    init() {
      this.from = this.$route.params.from;
      if (this.$route.query.type == 2) {
        this.showMenu = false;
        this.tabIndex = 0;
        this.swipeData = [];
        this.mySwipeData = [];
      }
      this.userInfo = this.$localStorage.get("userInfo");
      this.loadData(0);
      this.fetchUserInfo();
    },
    //控制超长隐藏显示
    showmoreDesc(e) {
      let el = e.currentTarget;
      el.previousElementSibling.classList[!this.isDescStatus ? 'add' : 'remove']('overflow-line');
      el.classList[this.isDescStatus ? 'add' : 'remove']('more-collapse');
      el.innerHTML = !this.isDescStatus ? '全文' : '收起';
      this.isDescStatus = !this.isDescStatus;
      this.isShowMore = true;
    },
    getIsShow(content,isShare){
      if  (!isShare || isShare === '0') {
        if(content.length >= 40){
          return true;
        }
        return false;
      }
      return false;
    },
    scrollEnd(pos) {
      console.log("scrollEnd", pos);
      this.scrollToY = pos.y;
    },
    scrollTo() {
      this.$refs.scroll.scrollTo(0, this.scrollToY, 0, "");
    },
    fetchUserInfo() {
      this.userInfo.id = this.$route.query.userId;
      if (this.$route.query.type == 2 && this.$route.query.userId) {
        return this.fetchService
          .getUserInfoById(this.$route.query.userId)
          .then((res) => {
            if (res.code !== 0) {
              return;
            }
            this.userInfo = res.data;
            this.userInfo.id = this.$route.query.userId;
            this.userInfo.nickname = res.data.nickname || res.data.fullname;
          });
      }
      this.userInfo = this.$localStorage.get("userInfo");
    },
    go(name, data) {
      if (this.from === "workVillage") {
        return;
      }
      if (this.tabIndex === 1 || this.userInfo.id === data.userId) {
        return;
      }
      this.$store.state.redfriendsAdd = data;
      this.$router.push({ name: name });
    },
    goNext(name) {
      this.$router.push({ path: `/redfriendsRelease/${this.from}` });
    },
    goMyCircle(userInfo) {
      let myInfo = this.tools.getUserInfo();
      if (userInfo.id !== myInfo.id) {
        return false;
      }
      this.$router.push({
        name: `redfriendscircle`,
        query: { type: 2 },
        params: { from: "home" },
      });
    },
    goApplication() {
      this.$router.push({ path: `/applicationList`});
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData(this.tabIndex);
    },
    onPullingDown() {
      console.log("onPullingDown");
      this.pageIndex = 1;
      this.loadData(this.tabIndex);
    },
    loadData(index) {
      this.showNoData = false;
      if (this.currentIndex !== index) {
        this.pageIndex = 1;
        this.swipeData = [];
        this.mySwipeData = [];
      }
      this.currentIndex = this.tabIndex = index;
      let isFriend;
      if (index === 0) {
        isFriend = "0";
      } else {
        isFriend = "1";
      }
      let data = {
        page: this.pageIndex,
        limit: 10,
        isFriend: isFriend,
      };

      this.title = "红友圈";
      this.showTitle = true;
      if (this.$route.query.type == 2) {
        this.showMenu = false;
        data.isFriend = "2";
        data.userId = this.$route.query.userId;
      }
      if (index == 0) {
        this.getFriends(data);
      } else {
        this.getMyselfFriends(data);
      }
    },
    getTime(createTime) {
      return moment(createTime).format("MM-DD HH:mm");
    },
    //开始按
    gtouchstart(data,item,index,indexChild){
      this.onPress = item.id+indexChild
      var self = this;
      timeOutEvent = setTimeout(function(){
        if(self.userInfo.id === item.userId){
          self.longPress(data,index,indexChild)
        }else{
          clearTimeout(timeOutEvent);//清除定时器
          this.onPress = false
          return false
        }
      },500);//这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改，个人感觉500毫秒非常合适
      return false;
    },
    //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    gtouchend(data,item,index){
      clearTimeout(timeOutEvent);//清除定时器
      this.onPress = false
      if(timeOutEvent!=0){
        //这里写要执行的内容（尤如onclick事件）
        this.showAlertNew(data,item,index);
      }
      return false;
    },
    // //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    // gtouchmove(){
    //   clearTimeout(timeOutEvent);//清除定时器
    //   timeOutEvent = 0;
    // },
    //真正长按后应该执行的内容
    longPress(data,index,indexChild){
      timeOutEvent = 0;
      //执行长按要执行的内容，如弹出菜单
      let me = this
      this.$createDialog({
        type: 'confirm',
        icon: '',
        title: '温馨提示',
        content: '确定删除？',
        confirmBtn: {
          text: '确定',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
        cancelBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;'
        },
        onConfirm: () => {
          loginService.friendCommentDelete({id: data.commentList[indexChild].id}).then(res => {
            if (res.code === 0) {
              tools.tip("删除成功")
              data.commentList.splice(indexChild, 1)
              data.contextNum--
            }
          })
        }
      }).show()
    },
    showAlertNew(data,item,index) {//二级评论
      this.replyToUser = item.userName
      this.replyToUserId = item.userId
      this.supCommentId = item.id
      this.dialog = this.$createDialog({
        type: "prompt",
        title: "评论",
        prompt: {
          value: "",
          placeholder: '回复'+item.userName+':',
        },
        onConfirm: (e, promptValue) => {
          this.submitComment(data, promptValue, "2",index);
          // 清空回复评论的数据
          this.replyToUser = ''
          this.replyToUserId = ''
          this.supCommentId = ''
          this.dialog.remove()
        },
        onCancel: () => {
          this.replyToUser = ''
          this.replyToUserId = ''
          this.supCommentId = ''
          this.dialog.remove()
        }
      }).show();
    },
    showAlert(data) {
      this.dialog = this.$createDialog({
        type: "prompt",
        title: "评论",
        prompt: {
          value: "",
          placeholder: this.placeholder,
        },
        onConfirm: (e, promptValue) => {
          this.submitComment(data, promptValue, "2");
          this.dialog.remove()
        },
        onCancel: () => {
          this.dialog.remove()
        }
      }).show();
    },
    submitComment(data, promptValue, commentWay,index) {
      if(commentWay ==='2' && (this.tools.isNullStr(promptValue)|| !promptValue)){
        return tools.tip('请输入评论')
      }
      let paramData = {
        content: promptValue,
        commentWay: commentWay,
        friendNewsId: data.id,
        replyToUser: this.replyToUser,//被评论人姓名
        replyToUserId: this.replyToUserId,//被评论人id
        supCommentId: this.supCommentId //评论id
      };
      this.friendComment(paramData, data,index);
    },
    getFiles(files) {
      if (!files || files.trim() === "") {
        return [];
      }
      return files.split(",");
    },
    showImg(fileId) {
      let fileUrl = this.tools.getImgUrl(fileId);
      return fileUrl;
    },
    getFriends(data) {
      // 红友圈
      this.isLoading = true;
      loginService.friendNews(data).then((res) => {
        this.isLoading = false;
        if (res.code === 0 && res.data.length < 1) {
          this.$refs.scroll &&
            this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          return;
        }
        if (res.code !== 0) {
          return tools.tip(res.message);
        }
        // if (this.pageIndex == 1) {
        //   this.swipeData = []
        // }
        if (
          this.swipeData.length > 0 &&
          !this.isHasFocus(this.swipeData[0].id, res.data)
        ) {
          this.swipeData = this.swipeData.concat(res.data);
        } else {
          this.swipeData = res.data;
        }
        this.pageIndex++;
        this.$store.state.redfriendscircleList = this.swipeData;
        setTimeout(() => {
          this.$refs.scroll &&
            this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
    getMyselfFriends(data) {
      // 我的红友圈
      this.isLoading = true;
      loginService.friendNews(data).then((res) => {
        this.isLoading = false;
        if (res.code === 0 && res.data.length < 1) {
          this.$refs.scroll &&
            this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          return;
        }
        if (res.code !== 0) {
          return tools.tip(res.message);
        }
        // if (this.pageIndex == 1) {
        //   this.mySwipeData = []
        // }
        if (
          this.mySwipeData.length > 0 &&
          !this.isHasFocus(this.mySwipeData[0].id, res.data)
        ) {
          this.mySwipeData = this.mySwipeData.concat(res.data);
        } else {
          this.mySwipeData = res.data;
        }
        this.pageIndex++;
        this.$store.state.redfriendscircleList = this.mySwipeData;
        setTimeout(() => {
          this.$refs.scroll &&
            this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
    getFriendsShare(data) {
      // 互动分享
      loginService.shareFriendNews(data).then((res) => {
        this.showNoData = true;
        if (res.code === 0 && res.data.length < 1) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return;
        }
        this.pageIndex++;
        this.swipeData = this.swipeData.concat(res.data);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
    friendComment(paramData, data) {
      // 红友圈评论
      loginService.friendComment(paramData).then((res) => {
        if (res.code === 0) {
          if (paramData.commentWay === "0") {
            data.isComment = "1";
            data.commentNum = data.commentNum + 1;
            tools.tip("点赞成功");
          } else if (paramData.commentWay === "2") {
            tools.tip("评论成功");
            data.contextNum ++
            if(data.commentList && data.commentList.length >0){//如果列表为展开状态
              data.commentList.push(res.data)
            }
          }
        } else {
          tools.tip(res.message);
        }
        // this.pageIndex = 1
        // this.swipeData = []
        // this.loadData(this.currentIndex)
      });
    },
    shareFriendComment(paramData, data) {
      // 互动分享评论
      loginService.shareFriendComment(paramData).then((res) => {
        if (res.code === 0) {
          if (paramData.commentWay === "0") {
            tools.tip("点赞成功");
            data.isComment = "1";
            data.commentNum = data.commentNum + 1;
          } else if (paramData.commentWay === "2") {
            tools.tip("评论成功");
          }
          // this.pageIndex = 1
          // this.swipeData = []
          // this.loadData(this.currentIndex)
        } else {
          tools.tip(res.message);
        }
      });
    },
    back() {
      this.tools.back();
    },
    delEvaluate(list,item,index){
      this.flag--
      list[index].commentList = []
    },
    goEvaluate(list,item,index) {
      /*this.$localStorage.set("evaluateData", data);
      this.$router.push({ path: `/evaluate` });*/
      let data = {
        isFrist: '0',//是否要全部(0需要)
        newsId: item.id,
        page: 1,
        limit: 1000,
        params: {}
      }
      return loginService.getFriendComment(data).then(res => {
        if (res.code !== 0) {
          return this.tools.tip(res.message || res.resp_msg || '接口出错，请联系管理员')
        }
        list[index].commentList = res.data
        this.flag++
        return res
      })
    },
    fetchList (id) {//查询评论列表
      let data = {
        newsId: id,
        page: 1,
        limit: 1000,
        params: {}
      }
      return loginService.getFriendComment(data).then(res => {
        if (res.code !== 0) {
          return this.tools.tip(res.message || res.resp_msg || '接口出错，请联系管理员')
        }
        this.data.commentList = res.data
        this.flag++
        return res
      })
    },
    showImagePreview(fileId) {
      if (fileId.length < 1) {
        return false;
      }
      let fileUrl = this.tools.getImgUrl(fileId);
      if(this.tools.indexOfHttp(fileId)){//判断是否为oss地址，如果有，直接使用oss地址请求
        fileUrl = fileId
      }
      let imgs = [fileUrl];
      let me = this;
      let instance = this.$createImagePreview(
        {
          initialIndex: 0,
          imgs: imgs,
          onHide: () => {
            me.tools.dialog(-1);
            me.tools.dialogDestroy();
          },
        },
        (h) => {
          return h(
            "div",
            {
              class: {
                "view-img-download": true,
              },
              domProps: {
                innerHTML: "下载",
              },
              on: {
                click: me.downLoadFile,
              },
              slot: "footer",
            },
            ""
          );
        }
      ).show();
      instance.back = instance.hide;
      me.tools.dialog(1, instance);
    },
    downLoadFile(event) {
      let src = event.target.parentElement.parentElement.querySelector("img")
        .src;
      console.log("downLoadFile", src);
      this.tools.nativeDownLoad(src, Date.now() + ".png");
    },
    getMyFriends() {
      this.tabIndex = 2;
      this.currentIndex = 2;
      let data = {
        page: 1,
        limit: 1000,
        params: {},
      };
      this.fetchService.friends(data).then((res) => {
        if (res.code !== 0) {
          return tools.tip(res.message);
        }
        this.frinds = res.data;
      });
    },
    /*判断是否存在某个值*/
    isHasFocus(userId, list) {
      let ret = false;
      list.some((v) => {
        if (v.id === userId) {
          ret = true;
          return false;
        }
      });
      return ret;
    },
    showDeleteAlert(item) {
      let me = this;
      this.$createDialog({
        type: "confirm",
        title: "确定删除好友？",
        content: "",
        confirmBtn: {
          text: "确定",
          active: true,
          disabled: false,
          href: "javascript:;",
        },
        cancelBtn: {
          text: "取消",
          active: false,
          disabled: false,
          href: "javascript:;",
        },
        onConfirm: () => {
          me.deletefriend(item);
        },
        onCancel: () => {},
      }).show();
    },
    deletefriend(item) {
      this.fetchService.deletefriend(item.id).then((res) => {
        if (res.code !== 0) {
          return tools.tip(res.message);
        }
        tools.tip("删除成功！");
        this.getMyFriends();
      });
    },
    goDetail(id) {
      this.$router.push({ path: `/friendInfo/${id}` });
    },
    /*暂存数据*/
    storeData() {
      let storeKeys = [
        "userInfo",
        "swipeData",
        "pageIndex",
        "tabIndex",
        "currentIndex",
        "tipMessage",
        "from",
        "title",
        "showTitle",
        "showMenu",
        "frinds",
        "showNoData",
        "scrollToY",
      ];
      this.tools.storeData(this, storeKeys);
    },
    onRouteChange(vm) {
      this.$refs.scroll &&
        this.$refs.scroll.forceUpdate &&
        this.$refs.scroll.forceUpdate(true, false);
      let to = vm.$route;
      if (vm.$route.query.type) {
        vm.needRefresh = true;
        vm.pageIndex = 1;
        vm.swipeData = [];
        vm.init();
      } else if (
        vm.needRefresh ||
        vm.$store.state.redFriendscircleNeedRefresh
      ) {
        console.log("refresh home");
        vm.currentIndex = 0;
        vm.showTitle = true;
        vm.showMenu = true;
        vm.$store.state.redFriendscircleNeedRefresh = false;
        vm.needRefresh = false;
        vm.pageIndex = 1;
        vm.swipeData = [];
        vm.init();
      }
    },
  },
  watch: {
    $route(to, from) {
      this.typeId = this.$route.query.type;
      if (this.typeId == 2) {
        this.backHead = false;
      } else {
        this.backHead = true;
      }
      if (to.name !== from.name) {
        return false;
      }
      // 只处理内部跳转
      this.onRouteChange(this);
    },
  },
  beforeRouteUpdate(to, from, next) {
    console.log("beforeRouteUpdate", to);
    // 长时间未进入删除缓存数据
    let outTime = 300 * 1000;
    if (Date.now() - this.tools.resumeStoreData(this)._storeTime > outTime) {
      this.tools.clearStoreData(this);
      this.init();
    }
    next();
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (to.fullPath && to.fullPath.indexOf("refresh")!= -1) {//判断是否刷新
        vm.onPullingDown()
        vm.$router.replace({path: `/redfriendscircle/home`})
      }
      console.log("beforeRouteEnter2", vm);
      vm.onRouteChange(vm);
    });
  },
  beforeRouteLeave(to, from, next) {
    console.log("beforeRouteLeave");
    this.storeData();
    next();
  },
};
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
.user-header {
  background: url("../../../../static/images/dangjian/mine/bg-mine-hd.png")
    #F5F5F5 no-repeat;
  background-size: 100% auto;
}
.header {
  .message {
    width: pxToRem(38px * 1.3);
    height: pxToRem(42px * 1.3);
    right: 20px;

    img {
      width: 100%;
      height: auto;
    }
  }
}

.mine-page {
  /* background: url("../../../../static/images/dangjian/mine/bg-mine-hd.png") #F5F5F5 no-repeat top center;
    background-size: 100% auto; */
  padding: 0;
  overflow-y: hidden;
  .header {
    background: none;
    justify-content: space-between;
    margin-bottom: pxToRem(40px);
  }
}

.cont {
  flex: 1;
}

.fillet {
  overflow: hidden !important;
  border-radius: 50% !important;
  img {
    position: absolute;
    /*left: 0;*/
    /*top: 50%;*/
    /*width: 1.57333rem !important;*/
    /*height: 1.57333rem !important;*/
    border-radius: 50%;
  }
}
.m-content {
  &.overflow-line {
    font-family: PingFang SC,miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all;
  }
}

.btn-more {
  color: #5383E7;
  position: relative;
  display: flex;
  font-size: 14PX;
  &.more-collapse {

    &::after,
    &::before {
      top: 2px;
      transform: rotate(180deg);
    }

    &::before {
      top: 4px;
    }
  }

  &::after,
  &::before {
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    right: 0;
    top: 7px;
    border: rc(12) solid transparent;
  }

  &::after {
    border-top-color:#5383E7;
    z-index: 1;
  }

  &::before {
    border-top-color: #1c2239;
    z-index: 2;
    top: 5px;
  }

}
.center-my{
  margin-right: 0.5rem;
  margin-left: 0.2rem;
}
</style>

